<template>
  <div id="feature">
    <h1>{{ msg }}</h1>
    <tool-box v-on:drawPoint="sayHi"></tool-box>
    <olmap ref="map" />
  </div>
</template>

<script>
import olmap from '../../map/olmap.vue'
import toolBox from './tool-box.vue'
export default {
  name: 'feature',
  components: {
    olmap, toolBox
  },
  data() {
    return {
      msg: 'feature'
    }
  },
  methods: {
    sayHi: function () {
      alert('Hi!')
    }
  },
  created: function () {
    console.log(this.$refs)
  },
  mounted: function () {
    // 挂载后才执行
    console.log(this.$refs)
    let map = this.$refs.map.map;
    console.warn(map)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
#feature {
  h1,
  h2 {
    font-weight: normal;
  }
}
</style>
